<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/car.min.css">
    <link rel="stylesheet" href="css/rest.min.css">
    <link rel="stylesheet" href="css/footer.min.css">
    <link rel="stylesheet" href="css/header.min.css">
    <link rel="stylesheet" href="css/index.min.css">
    <link rel="stylesheet" href="css/login.min.css">
    <link rel="stylesheet" href="css/resgister.min.css">
    <link rel="stylesheet" href="css/cakexqy.min.css">
    <link rel="stylesheet" href="css/goodslist.min.css">
    <link rel="stylesheet" href="css/about.min.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

<body>

    <header class="header">
        <div class="head">
            <a href="index.html"><img src="images/logo.png" alt="" class="logo_1"></a>
            <div class="right_head">
                <div class="top_h">
                    <span class="dizhi">
                        <a href="" >西安</a> 
                    </span>
                    <span class="shoppingcar">
                        <span >0</span>件
                    </span>
                    <span class="denglu"><a href="login.html">登录</a> </span>
                    <span class="zhuce"><a href="resgister.html">注册</a> </span>
                </div>
                <div class="bottom_h">
                    <ul class="banner">
                        <li class="navmenu">
                            <a href="goodslist.html">
                                <span>All Products</span><br>
                                <span>全部产品</span>
                            </a>
                        </li>
                        <li class="navmenu" id="jinav2">
                            <a href="">
                                <span>Cake Series</span><br>
                                <span>蛋糕系列</span>
                            </a>
                            <ul class="sub_nav" style="display: none;">
                                <li style="border-bottom:none;"><a href="">新品系列</a></li>
                                <li style="border-bottom:none;"><a href="">经典系列</a></li>
                                <li style="border-bottom:none;"><a href="">儿童系列</a></li>
                                <li style="border-bottom:none;"><a href="">尊爱系列</a></li>
                            </ul>
                        </li>
                        <li class="navmenu">
                            <a href="">
                                <span>Wagashi</span><br>
                                <span>零食糕点</span>
                            </a>
                        </li>
                        <li class="navmenu" style="border:none;">
                            <a href="">
                                <span>About Us</span><br>
                                <span>关于我们</span>
                            </a>
                        </li>
                    </ul>
                    <div class="h_phone"><img src="images/phone_icon.png" height="15"> 400-700-5999</div>
                    <div class="h_navserch">
                        <input type="text">
                    </div>
                </div>

            </div>

    </header>

    <div class="h_user">
        <span></span> 购物车
        <span style="float:right;"></span>
    </div>
    <table class="shopcart">
        <thead>

            <tr>
                <th style="width:220px;">
                    <button class="checkAll">全选</button>
                    <button class="checkReverse">取消选择</button>
                </th>
                <th style="width:300px;">商品名称</th>
                <th style="width:180px;">属性</th>
                <th style="width:110px;">积分</th>
                <th style="width:98px;">单价</th>
                <th style="width:103px;">购买数量</th>
                <th style="width:150px;">小计</th>
                <th style="width:120px;">操作</th>
            </tr>
        </thead>
        <tbody class="shopcarttbody">
            <tr id="template">
                <td>
                    <input type="checkbox" class="isChecked" style="width: 20px; height: 20px;">&nbsp;&nbsp;<img src="images/cake1.jpg" alt="" style="width: 60px; height: 60px;">
                </td>
                <td class="subname"></td>
                <td>半熟花花马卡龙 4枚/盒 (4种口味)</td>
                <td bgcolor="#ffffff">62积分</td>
                <td>
                    ¥
                    <span class="subprice"></span>
                </td>
                <td>
                    <button class="sub">-</button>
                    <span class="count">1</span>
                    <button class="add">+</button>
                </td>

                <td>
                    小计:¥
                    <span class="subtotal">0</span>
                </td>
                <td>
                    操作:&nbsp;&nbsp;<button class="delete">删除</button>
                </td>
            </tr>

            <tr>
                <td colspan="8" style="height: 50px;">商品一共<span class="totalcount"> 0 </span>件;共计花费 ¥ <span class="totalprice">0</span> 元</td>
            </tr>

        </tbody>
    </table>
    <div class="gonext"><span> 去结算</span></div>
    <div class="h_user">
        <span style="float:right;  width: 996px"></span>
    </div>

    <footer class="footer">

        <div class="h_footerhelp">
            <p style="width:976px;"> 帮助中心 <i></i> </p>
            <div class="h_footmenu">
                <dl>
                    <dt class="bg0"> <i style="background:url(images/bj3.png) no-repeat;"></i>购物指南</dt>
                    <dd> <a href="/article.php?id=7">购物流程</a> </dd>
                    <dd> <a href="/article.php?id=9">蛋糕尺寸</a> </dd>
                </dl>
                <dl>
                    <dt class="bg1"> <i style="background:url(images/bj3.png) no-repeat;"></i>订购范围</dt>
                    <dd> <a href="/article.php?id=12">地图查询</a> </dd>
                    <dd> <a href="/article.php?id=13">团购业务</a> </dd>
                </dl>
                <dl>
                    <dt class="bg2"> <i style="background:url(images/bj3.png) no-repeat;"></i>公司服务</dt>
                    <dd> <a href="/article.php?id=14">储值卡</a> </dd>
                    <dd> <a href="/article.php?id=60">西安门店</a> </dd>
                    <dd> <a href="/article.php?id=77">官网营业资质</a> </dd>
                </dl>
                <dl>
                    <dt class="bg3"> <i style="background:url(images/bj3.png) no-repeat;"></i>企业招聘</dt>
                    <dd> <a href="/article.php?id=17">好利来招聘</a> </dd>
                    <dd> <a href="/article.php?id=18">黑天鹅招聘</a> </dd>
                    <dd> <a href="/article.php?id=81">好利来招聘wap</a> </dd>
                </dl>
                <dl>
                    <dt class="bg4"> <i style="background:url(images/bj3.png) no-repeat;"></i>售后服务</dt>
                    <dd> <a href="">投诉渠道</a> </dd>
                    <dd> <a href="">客服中心</a> </dd>
                    <dd> <a href="/">加盟维权</a> </dd>
                </dl>
                <dl>
                    <dt class="bg5"> <i></i>友情链接</dt>
                    <dd> <a href="">黑天鹅蛋糕官网</a> </dd>
                    <dd> <a href="">罗红摄影艺术馆</a> </dd>
                    <dd> <a href="">百度</a> </dd>
                </dl>
            </div>
        </div>
        <div class="h_footer">
            <span>
		        <p> Copyright2010 ©北京市好利来食品有限公司 版权所有 <br>京icp备15012142号 <br>好利来官方邮箱：info@holiland.com <br></p>
		        <p>客服电话：400-700-5999</p>
		        <p>注册地址：北京市朝阳区观音堂文化大道甲6号北201室<br>食品流通许可证号：<br>统一社会信用代码：91110105721420005Y</p>
	            </span>
            <div class="h_footerright">
                <h4> FOLLOW US </h4>
                <a href="" class="h_weixin"></a>
                <div class="h_fenxiang">
                    <p> 在微信上关注我们 </p>
                    <img src="images/weixin.jpg">
                </div>
            </div>

        </div>
    </footer>
    <div id="h_footerfix">
        <a href=""> <span><img src="images/msg2@68x66.png" alt=""></span>联系客服，在线咨询</a>
    </div>
    </div>
</body>

</html>
<script src="jQuery.js"></script>
<script src="menue.min.js"></script>
<script>
    // 给NodeList绑定事件
    function bindEvent(nodeList, eventType, fn) {
        for (let i = 0; i < nodeList.length; i++) {
            nodeList[i][eventType] = fn;
        }
    }

    // 根据页面中的节点，计算并更新总价格和总数量
    function computedTotal() {
        let totalCount = 0;
        let totalPrice = 0;
        let countList = document.querySelectorAll(".shopcart .count");
        let subtotalList = document.querySelectorAll(".shopcart .subtotal");
        let checkboxList = document.querySelectorAll(".shopcart .isChecked");
        for (let i = 0; i < countList.length; i++) {
            if (checkboxList[i].checked) {
                totalCount = totalCount + Number(countList[i].innerHTML)
                totalPrice = totalPrice + Number(subtotalList[i].innerHTML)
            }
        }

        document.querySelector(".totalcount").innerHTML = totalCount;
        document.querySelector(".totalprice").innerHTML = totalPrice;
    }

    let goodsList = [{
        name: "半熟花花马卡龙-七夕情人节礼盒",
        price: 69.00,

    }]

    // 根据JSON数据生成页面中的元素
    let template = document.getElementById("template");
    let tbody = document.querySelector(".shopcarttbody");

    goodsList.forEach(function(item) {
        let newItem = template.cloneNode(true);
        tbody.insertBefore(newItem, template);
        newItem.id = "";
        newItem.querySelector(".subname").innerHTML = item.name;
        newItem.querySelector(".subprice").innerHTML = item.price;
        newItem.querySelector(".subtotal").innerHTML = item.price;
    })



    let addButtons = document.querySelectorAll(".add");
    let subButtons = document.querySelectorAll(".sub");
    let deleteButtons = document.querySelectorAll(".delete");

    bindEvent(addButtons, "onclick", function() {
        // 当前所在行的数量元素
        let countNode = this.parentNode.querySelector(".count");
        // 当前所在行的小计元素
        let subtotalNode = this.parentNode.parentNode.querySelector(".subtotal")
            // 当前所在行的单价元素
        let subpriceNode = this.parentNode.parentNode.querySelector(".subprice")

        countNode.innerHTML = parseInt(countNode.innerHTML) + 1;
        subtotalNode.innerHTML = countNode.innerHTML * subpriceNode.innerHTML;
        computedTotal()

    })

    bindEvent(subButtons, "onclick", function() {
        // 当前所在行的数量元素
        let countNode = this.parentNode.querySelector(".count");
        // 当前所在行的小计元素
        let subtotalNode = this.parentNode.parentNode.querySelector(".subtotal")
            // 当前所在行的单价元素
        let subpriceNode = this.parentNode.parentNode.querySelector(".subprice")

        // 数量限制最小值
        if (Number(countNode.innerHTML) === 1) {
            return;
        }

        countNode.innerHTML = parseInt(countNode.innerHTML) - 1;
        subtotalNode.innerHTML = countNode.innerHTML * subpriceNode.innerHTML;
        computedTotal()

    })

    bindEvent(deleteButtons, "onclick", function() {

        // 执行动画并隐藏当前行元素
        let nowTr = this.parentNode.parentNode;
        nowTr.style.opacity = 1;
        let fade = setInterval(function() {
            let o = parseFloat(nowTr.style.opacity);
            if (o <= 0) {
                clearInterval(fade);
                nowTr.style.opacity = 0;
                nowTr.parentNode.removeChild(nowTr);
                computedTotal()
                return;
            }
            nowTr.style.opacity = o - 0.05;
        }, 16)
    })


    let checkboxList = document.querySelectorAll(".shopcart .isChecked");
    bindEvent(checkboxList, "onclick", function() {
        computedTotal()
    })

    // 全选
    document.querySelector(".checkAll").onclick = function() {

        let isChecked = true;
        for (let i = 0; i < checkboxList.length; i++) {
            if (!checkboxList[i].checked) {
                isChecked = false;
            }
        }

        for (let i = 0; i < checkboxList.length; i++) {
            if (isChecked) {
                checkboxList[i].checked = false;
            } else {
                checkboxList[i].checked = true;
            }
        }
        computedTotal();
    }

    document.querySelector(".checkReverse").onclick = function() {
        for (let i = 0; i < checkboxList.length; i++) {
            checkboxList[i].checked = !checkboxList[i].checked;
        }
        computedTotal()
    }
</script>